<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item label="对比时间1">
          <el-date-picker unlink-panels :editable="false" v-model="pickerDate1" type="daterange" align="right" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" :picker-options="pickerOptions1" style="width:230px"></el-date-picker>
        </el-form-item>
        <el-form-item label="对比时间2">
          <el-date-picker unlink-panels :editable="false" v-model="pickerDate2" type="daterange" align="right" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" :picker-options="pickerOptions2" style="width:230px"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px;width:400px">
              营业对比表数据取自除扫码支付、刷卡扣币、次季年卡外所有产生金额大于0的业务在PC端的营收记录，按照金额区间分别展示。
              <br>笔数占比=该项笔数/合计笔数
              <br>金额占比=该项金额/合计金额
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border :summary-method="getSummaries" size="small">
        <el-table-column align="center" prop="name" label="收入分类">
        </el-table-column>
        <el-table-column align="center" :label="time1">
          <el-table-column align="center" prop="t1" label="笔数">
            <template slot-scope="scope">
              {{scope.$index==(list.length-1)?'-':scope.row.t1}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="t1_prop" label="笔数占比" :render-header="(h,obj) => renderHeader(h,obj,'笔数占比=该日期该项笔数/该日期合计项笔数')"></el-table-column>
          <el-table-column align="center" prop="m1" label="金额"></el-table-column>
          <el-table-column align="center" prop="m1_prop" label="金额占比" :render-header="(h,obj) => renderHeader(h,obj,'金额占比=该日期该项金额/该日期合计项金额')"></el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="time2">
          <el-table-column align="center" prop="t2" label="笔数">
            <template slot-scope="scope">
              {{scope.$index==(list.length-1)?'-':scope.row.t2}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="t2_prop" label="笔数占比" :render-header="(h,obj) => renderHeader(h,obj,'笔数占比=该日期该项笔数/该日期合计项笔数')"></el-table-column>
          <el-table-column align="center" prop="m2" label="金额"></el-table-column>
          <el-table-column align="center" prop="m2_prop" label="金额占比" :render-header="(h,obj) => renderHeader(h,obj,'金额占比=该日期该项金额/该日期合计项金额')"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getStoreList } from '@/api/storage_control/business_compare_form';
import { renderHeader } from '@/utils';
export default {
  data() {
    return {
      renderHeader,
      list: [],
      total: null,
      listLoading: false,
      storeList: null,
      time1: '',
      time2: '',
      formInline: {
        store_id: '',
        begin_time1: '',
        end_time1: '',
        begin_time2: '',
        end_time2: '',
        look_del: '0'
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      pickerDate1: [
        new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDate()))
          .toISOString()
          .slice(0, 10)
          .replace('-', '.')
          .replace('-', '.'),
        new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()))
          .toISOString()
          .slice(0, 10)
          .replace('-', '.')
          .replace('-', '.')
      ],
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      pickerDate2: [
        new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDate()))
          .toISOString()
          .slice(0, 10)
          .replace('-', '.')
          .replace('-', '.'),
        new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()))
          .toISOString()
          .slice(0, 10)
          .replace('-', '.')
          .replace('-', '.')
      ]
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    getStore() {
      getStoreList({ look_del: this.formInline.look_del, category_id: 289 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[0].id;
          }
        }
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (index > 0) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
            sums[index] = (sums[index] * 1).toFixed(2) * 1;
          } else {
            sums[index] = '-';
          }
        }
      });
      return sums;
    },
    // 搜索
    searchClick() {
      if (this.pickerDate1 == null || this.pickerDate2 == null) {
        this.$message({ type: 'error', message: '请先选择对比时间再进行查询' });
        return;
      }
      if (
        (new Date(this.pickerDate1[1]).getTime() - new Date(this.pickerDate1[0]).getTime()) / 86400000 > 93 ||
        (new Date(this.pickerDate2[1]).getTime() - new Date(this.pickerDate2[0]).getTime()) / 86400000 > 93
      ) {
        this.$message({ type: 'error', message: '所选时间区间最大为93天' });
        return;
      }
      console.log(
        new Date(this.pickerDate1[0]).getFullYear() + '-' + (new Date(this.pickerDate1[0]).getMonth() + 1) + '-' + new Date(this.pickerDate1[0]).getDate()
      );
      this.formInline.begin_time1 =
        new Date(this.pickerDate1[0]).getFullYear() + '-' + (new Date(this.pickerDate1[0]).getMonth() + 1) + '-' + new Date(this.pickerDate1[0]).getDate();
      this.formInline.end_time1 =
        new Date(this.pickerDate1[1]).getFullYear() + '-' + (new Date(this.pickerDate1[1]).getMonth() + 1) + '-' + new Date(this.pickerDate1[1]).getDate();
      this.formInline.begin_time2 =
        new Date(this.pickerDate2[0]).getFullYear() + '-' + (new Date(this.pickerDate2[0]).getMonth() + 1) + '-' + new Date(this.pickerDate2[0]).getDate();
      this.formInline.end_time2 =
        new Date(this.pickerDate2[1]).getFullYear() + '-' + (new Date(this.pickerDate2[1]).getMonth() + 1) + '-' + new Date(this.pickerDate2[1]).getDate();
      console.log(this.formInline);
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      let m1_total = 0;
      let m2_total = 0;
      let m3_total = 0;
      let t1_total = 0;
      let t2_total = 0;
      let t3_total = 0;
      let m1_prop = 0;
      let m2_prop = 0;
      let m3_prop = 0;
      let t1_prop = 0;
      let t2_prop = 0;
      let t3_prop = 0;
      getList(this.formInline)
        .then(response => {
          this.time1 = this.formInline.begin_time1 + ' 至 ' + this.formInline.end_time1;
          this.time2 = this.formInline.begin_time2 + ' 至 ' + this.formInline.end_time2;
          response.forEach(function(val, i) {
            val.m1 = (val.m1 / 100).toFixed(2) * 1;
            val.m2 = (val.m2 / 100).toFixed(2) * 1;
            val.m3 = (val.m3 / 100).toFixed(2) * 1;
            val.t1 *= 1;
            val.t2 *= 1;
            val.t3 *= 1;
            // 总数
            m1_total += val.m1;
            m2_total += val.m2;
            m3_total += val.m3;
            t1_total += val.t1;
            t2_total += val.t2;
            t3_total += val.t3;
          });
          // 计算百分比
          response.forEach(function(val, i) {
            val.m1_prop = val.m1 * 1 != 0 ? ((val.m1 / m1_total) * 100).toFixed(2) + '%' : '0%';
            val.m2_prop = val.m2 * 1 != 0 ? ((val.m2 / m2_total) * 100).toFixed(2) + '%' : '0%';
            val.m3_prop = val.m3 * 1 != 0 ? ((val.m3 / m3_total) * 100).toFixed(2) + '%' : '0%';
            val.t1_prop = val.t1 * 1 != 0 ? ((val.t1 / t1_total) * 100).toFixed(2) + '%' : '0%';
            val.t2_prop = val.t2 * 1 != 0 ? ((val.t2 / t2_total) * 100).toFixed(2) + '%' : '0%';
            val.t3_prop = val.t3 * 1 != 0 ? ((val.t3 / t3_total) * 100).toFixed(2) + '%' : '0%';
          });
          this.list = response;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>